<template>
    <div>
        <el-row>
            <el-col :span="24" class="check_bill_int">
                <el-input placeholder="请输入企业名称" v-model="form.enterpriseName" clearable @clear="chooseFind()"></el-input><el-button type="primary" size="small" @click="chooseFind()">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="corpId" label="企业id"> </el-table-column>
            <el-table-column prop="enterpriseName" label="企业名"> </el-table-column>
            <el-table-column prop="bankName" label="开户行"> </el-table-column>
            <el-table-column prop="accountNumber" label="账户号(卡号)"> </el-table-column>
            <el-table-column prop="salerBuyerVAcctNo" label="虚拟号"> </el-table-column>
            <el-table-column prop="bundlingTime" label="更新时间" width="130">
                <template slot-scope="scope">
                    <span>{{scope.row.bundlingTimeY}}</span><br/><span>{{scope.row.bundlingTimeH}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="statusValue" label="状态"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="deleteAccount(scope.row)"><i class="iconfont icon-shanchu icon_edit_style"></i> 删除</el-button>
                    <el-button size="small" v-if="scope.row.status == 3" @click="openAccount(scope.row)" class="check_btn_style">开户</el-button>
                    <el-button type="text" size="small" @click="detailAccount(scope.row)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
        <MemberDetail ref="memberdetail"></MemberDetail>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
    import Pagination from "@/types/Pagination";
    import MemberDetail from '@component/manage/member/Detail.vue';
    import moment from 'moment';
    var memberStore = namespace('member')

    @Component({
        extends: Pagination,
        components: {
            MemberDetail
        }
    })
    export default class CIB extends Vue {
        @memberStore.Action('loadPlatformDetail') loadPlatformDetail!:Function;
        activeName = 'self'
        tableData = []
        form = {
            enterpriseName: ''
        }
        // 获取账户列表
        async getAccoutList () {
            let parm = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                enterpriseName: this.form.enterpriseName
            }
            let res = await this.$http.post('xingye/account/list',parm)
            if(res.status == 200){
                let { items, totalNum } = res.data;
                items.forEach((i) => {
                    i.bundlingTimeY = moment(i.bundlingTime).format('YYYY-MM-DD')
                    i.bundlingTimeH = moment(i.bundlingTime).format('HH:mm:ss')
                })
                this.tableData = items;
                this.pagination.total = totalNum;
            }
        }
        chooseFind () {
            this.getAccoutList();
        }
        // 开户
        openAccount (row) {
            this.$http.get(`paying/xingyeapi/xingYeOpenAccount/open/${row.enterpriseId}`)
                .then((res) => {
                    if (res.status == 200){
                        this.getAccoutList();
                        this.$alert('开户成功','提示',{
                            confirmButtonText: '确定',
                            customClass: 'custom-message-box',
                            callback: action => {}
                        })
                    }
                })
        }
        // 删除
        deleteAccount (row) {
            this.$confirm('确定删除该账户？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.$http.delete(`xingye/account/${row.id}`)
                    .then((res) => {
                        if (res.status == 200){
                            this.getAccoutList();
                            this.$alert('账户删除成功','提示',{
                                confirmButtonText: '确定',
                                customClass: 'custom-message-box',
                                callback: action => {}
                            })
                        }
                    })
            }).catch((err) => {
                console.log(err)
            });
        }
        getCurrentRowStatus({ currentStatus }:any) {
            var status = 4
            return status;
        }

        // 查看详情
        detailAccount (row: any) {
            const self = this;
            const memberState = this.getCurrentRowStatus(row);
            this.loadPlatformDetail({
                customerId: row.customerId,
                enterpriseId: row.enterpriseId,
                inviterName: row.inviterName,
                agentTreasurerId: row.agentTreasurerId,
                bankAccountId: row.id,
                number: memberState
            }).then((res)=>{
                if (!res.data) {
                    self.$notify({
                        title: '消息',
                        message: '数据为空',
                    });
                    return
                }
                self.$refs.memberdetail.open(memberState);
            })
        }
        loadDataForPagination() {
            this.getAccoutList()
        }
        mounted () {
            this.getAccoutList();
        }
    }
</script>

<style lang="scss">

</style>